<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航</title>
    <link href="css/layui.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">lauwen 导航网站</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="http://www.luxuewen.com" target="_blank">个人简介</a></li>
            <li class="layui-nav-item"><a href="https://blog.csdn.net/Douz_lungfish" target="_blank">博客</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">代码管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="https://github.com/lauwen" target="_blank">GitHub</a></dd>
                    <dd><a href="https://gitee.com/lauwen" target="_blank">码云</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="https://avatar.csdn.net/4/E/1/3_douz_lungfish.jpg" class="layui-nav-img">
                    lauwen
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item"><a href="">退出</a></li>
        </ul>
    </div>
</div>
<div class="layui-container container">
    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="layui-row menu-box">
                <div class="layui-col-md-12 layui-bg-blue box-title">
                    <h3>学校</h3>
                </div>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
            </div>
            <div class="layui-row menu-box">
                <div class="layui-col-md-12 layui-bg-blue box-title">
                    <h3>学校</h3>
                </div>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
            </div>
            <div class="layui-row menu-box">
                <div class="layui-col-md-12 layui-bg-blue box-title">
                    <h3>学校</h3>
                </div>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
                <a href="http://www.zhbit.com" target="_blank">
                    <div class="layui-col-md3 menu">
                        <img src="image/logo.png" width="50" height="50"/>
                        北京理工大学珠海学院
                    </div>
                </a>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-row tool-box">
                <div class="layui-col-md12 layui-bg-blue box-title">
                    <h3>时间戳/时间</h3>
                </div>
                <div class="layui-col-md12">
                    <p>当前时间戳：</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/layui.js"></script>
<script>
    console.log();
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //…
    });
</script>
</body>
</html>